<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-alert
          :title="infoAlert.title"
          :type="infoAlert.type"
          center
          show-icon
          :closable="false"
          style="margin-bottom: 15px"
        ></el-alert>
      </el-col>
    </el-row>
    <el-row>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="有无验收表" prop="required">
              <el-radio-group v-model="form.required">
                <el-radio
                  v-for="dict in dict.type.is_required"
                  :key="dict.value"
                  :label="dict.value"
                  >{{ dict.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目名称" prop="orderId">
              <el-select
                disabled
                v-model="form.orderId"
                filterable
                clearable
                placeholder="请选择商机"
                size="small"
                style="width: 100%"
              >
                <el-option
                  v-for="item in orderList"
                  :key="item.orderId"
                  :label="item.orderName"
                  :value="item.orderId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户名称" prop="customerId">
              <el-select
                v-model="form.customerId"
                disabled
                placeholder="请选择客户名称"
                filterable
                style="width: 100%"
              >
                <el-option
                  v-for="customer in customerList"
                  :key="customer.customerId"
                  :label="customer.customerName"
                  :value="customer.customerId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="form.required === '1'">
          <el-row>
            <el-col :span="12">
              <el-form-item label="项目单位" prop="projectUnit">
                <el-input
                  v-model="form.projectUnit"
                  placeholder="请输入项目单位"
                >
                  <!-- <template slot="append">{{
                  digitUppercase(form.totalMoney)
                }}</template> -->
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="验收日期" prop="receptionTime">
                <el-date-picker
                  clearable
                  style="width: 100%"
                  v-model="form.receptionTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="请选择验收日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="联系人" prop="projectContacts">
                <el-input
                  v-model="form.projectContacts"
                  placeholder="请输入联系人"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话" prop="phone">
                <el-input v-model="form.phone" placeholder="请输入联系电话">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="开始时间" prop="startTime">
                <el-date-picker
                  clearable
                  style="width: 100%"
                  v-model="form.startTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="请选择开始时间"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结束日期" prop="endTime">
                <el-date-picker
                  clearable
                  style="width: 100%"
                  v-model="form.endTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="请选择结束日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input
                  v-model="form.remark"
                  type="textarea"
                  placeholder="请输入内容"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="上传项目验收单" prop="url">
                <file-upload v-model="form.url" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item>
              <el-button type="primary" @click="submitForm('1')"
                >提 交</el-button
              >
              <el-button type="info" @click="submitForm('0')">暂 存</el-button>
              <el-button @click="cancel">取 消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-row>
  </div>
</template>


<script>
import {
  addSheet,
  updateSheet,
  getCrmAcceptanceSheetInfo,
} from "@/api/crm/sheet";

export default {
  name: "AcceptanceSheet",
  dicts: ["crm_yes_no", "is_required"],
  props: {
    customerList: {
      type: Array,
      default: [],
    },
    orderList: {
      type: Array,
      default: [],
    },
    projectInfo: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        required: [
          {
            required: true,
            message: "有无合同选项不能为空",
            trigger: "change",
          },
        ],
        projectUnit: [
          {
            required: true,
            message: "项目单位不能为空",
            trigger: "change",
          },
        ],
        receptionTime: [
          {
            required: true,
            message: "验收日期不能为空",
            trigger: "change",
          },
        ],
        projectContacts: [
          {
            required: true,
            message: "联系人不能为空",
            trigger: "change",
          },
        ],
        phone: [
          {
            required: true,
            message: "电话不能为空",
            trigger: "change",
          },
        ],
        startTime: [
          {
            required: true,
            message: "开始时间不能为空",
            trigger: "change",
          },
        ],
        endTime: [
          {
            required: true,
            message: "结束时间不能为空",
            trigger: "change",
          },
        ],
        url: [
          {
            required: true,
            message: "项目验收单不能为空",
            trigger: "change",
          },
        ],
      },
      infoAlert: {
        type: "info",
        title: "待填写",
      },
    };
  },
  created() {},
  methods: {
    getData() {
      let projectId = this.projectInfo.projectId;
      getCrmAcceptanceSheetInfo(projectId).then((res) => {
        if (res.data) {
          this.form = res.data;
          switch (this.form.auditStatus) {
            
            case "0":
              this.infoAlert = { type: "info", title: "待提交" };
              break;
            case "1":
              this.infoAlert = { type: "warning", title: "待审核" };
              break;
            case "2":
              this.infoAlert = { type: "success", title: "审核通过" };
              break;
            case "3":
              this.infoAlert = { type: "error", title: "审核不通过" };
              break;
            case "4":
              this.infoAlert = { type: "warning", title: "审核中" };
             
          }
        } else {
          this.infoAlert = { type: "info", title: "待填写" };;
          this.form.projectId = this.projectInfo.projectId;
          this.form.orderId = this.projectInfo.orderId;
          this.form.customerId = this.projectInfo.customerId;

          this.$set(this.form, "required", "1");
        }
      });
    },
    // 取消按钮
    cancel() {
      this.reset();
      this.$emit("cancel");
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        orderId: null,
        projectId: null,
        customerId: null,
        receptionTime: null,
        projectUnit: null,
        projectContacts: null,
        phone: null,
        startTime: null,
        endTime: null,
        url: null,
        remark: null,
        auditStatus: null,
        required: "1",
      };
      this.resetForm("form");
    },
    submitForm(auditStatus) {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.form.auditStatus = auditStatus;
          if (this.form.id != null) {
            updateSheet(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.getData();
            });
          } else {
            addSheet(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.getData();
            });
          }
        }
      });
    },
  },
};
</script>

<style scoped>
::v-deep .el-input.is-disabled .el-input__inner {
  background-color: white;
  border-color: #dfe4ed;
  color: black;
  cursor: not-allowed;
}

::v-deep .el-textarea.is-disabled .el-textarea__inner {
  background-color: white;
  border-color: #dfe4ed;
  color: black;
  cursor: not-allowed;
}
</style>
